<template>
  <el-main class="loginMain" style="padding:0">

    <el-form ref="loginFormRef" size="large" label-position="left" label-width="0px" class="login-container" :model="formData" :rules="rules" @submit.prevent>
      <h3 class="title">深职院线上教学平台</h3>
      <el-form-item prop="account">
        <el-input v-model="formData.account" maxlength="20" type="text"  autocomplete="off" placeholder="账号">
          <template #prefix>
          <el-icon class="el-input__icon"><User /></el-icon>
        </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="formData.password" maxlength="20" type="password" autocomplete="new-password" placeholder="密码">
          <template #prefix>
          <el-icon class="el-input__icon"><Lock /></el-icon>
        </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="type">
        <el-select v-model="formData.type" placeholder="请选择类型">
          <template #prefix>
            <el-icon class="el-input__icon"><Postcard /></el-icon>
          </template>
          <el-option label="管理员" value="管理员"></el-option>
          <el-option label="老师" value="老师"></el-option>
          <el-option label="学生" value="学生"></el-option>
        </el-select>
      </el-form-item>
      <div><el-checkbox v-model="formData.checked" class="checked">记住登录</el-checkbox></div>
      <el-form-item>
        <el-button type="primary" class="loginBut" round native-type="submit" @click="submitForm">登录</el-button>
      </el-form-item>
    </el-form>
  </el-main>
</template>

 <script setup>
import { setCookie, getCookie,delCookie  } from '@/utils/auth' // get token from cookie
import { useStore } from 'vuex' // 引入useStore 方法
import {useRouter} from 'vue-router'
import { ref,toRefs,reactive,getCurrentInstance } from 'vue'
const store = useStore()  // 该方法用于返回store 实例
const router = useRouter()
const state = reactive({
        formData: {
          account:'admin',
          password:'admin',
          type:'管理员',
          checked:false
        },
        rules:{
          account: [{
            required: true,
            message: '请输入账号',
          }],
          password:[{
            required: true,
            message: '请输入密码',
          }],
          type:[{
            required: true,
            message: '请选择类型',
          }],
        }
})
const { formData,rules } = toRefs(state)
const {proxy} = getCurrentInstance()


// 是否记住密码
const userMsg = getCookie('userMsg') || ''
if (userMsg) {
  state.formData = JSON.parse(userMsg)
}

const loginFormRef = ref()
const submitForm = () => {
  loginFormRef.value.validate(valid => {
    if (!valid) return
    store.dispatch('user/login',state.formData).then(res=>{
      if (state.formData.checked) {
        setCookie('userMsg', JSON.stringify(state.formData))
      } else {
        delCookie('userMsg')
      }
      router.push('/staffInfo')
    }).catch(res=>{
      proxy.$message({
        type: "error",
        message: "账号或密码错误",
      })
    })
  })
}
</script>

<style lang="scss" >
.bgImg{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-100%, -50%);
  z-index: 1;

}
.loginMain {

  min-height: 100%;
    width: 100%;
    background-color: #2d3a4b;
    overflow: hidden;
    position: relative;




  .login-container {
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: 500px;
    border-radius: 8px;
    z-index: 2;

    .title {
      text-align: center;
      font-size: 26px;
      color: #eee;
      margin-bottom: 30px;
    }

    .checked{
      color: #9C9C9C;
    }

  }
}

.el-form-item__content .el-input__inner{
  border: 1px solid hsla(0,0%,100%,.1);
  background: rgba(0,0,0,.1);
  border-radius: 5px;
  color: #fff;
}

.loginBut{width: 100%;border-radius: 5px !important;}
</style>
